<template>
  <div class="app-container calendar-list-container">
    <el-card class="box-card">
      <h3>文章发布</h3>
      <el-form :rules="rules" ref="article" :model="article" label-width="150px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="article.title"></el-input>
        </el-form-item>
        <el-form-item label="题目" prop="headline">
          <el-input v-model="article.headline"></el-input>
        </el-form-item>
        <el-form-item label="图文" prop="content">
          <editor :init="editorInit" v-model="article.content"></editor>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="op-container">
      <el-button @click="handleCancel">取消</el-button>
      <el-button @click="handlePublish" type="primary">发布</el-button>
    </div>
  </div>
</template>

<script>
  import Editor from '@tinymce/tinymce-vue'
  import { createStorage, uploadPath } from '@/api/storage'
  import { publishArticle, listArticle } from '@/api/article'
  import { MessageBox } from 'element-ui'

  export default {
    name: 'articleAdd',
    components: { Editor },
    computed: {

    },

    data() {
      return {
        article: {
          title: '',
          headline: '',
          content: ''
        },
        rules: {
          title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
          headline: [{ required: true, message: '作者不能为空', trigger: 'blur' }]
        },
        editorInit: {
          language: 'zh_CN',
          plugins: ['advlist anchor autolink autoresize autosave emoticons fullscreen hr image imagetools importcss insertdatetime legacyoutput link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace tabfocus table template textcolor textpattern visualblocks visualchars wordcount'],
          toolbar: ['bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript ', 'hr bullist numlist link image charmap preview anchor pagebreak fullscreen media table emoticons forecolor backcolor fontselect fontsizeselect'],
          images_upload_handler: function(blobInfo, success, failure) {
            const formData = new FormData()
            formData.append('file', blobInfo.blob())
            createStorage(formData).then(res => {
              success("https://static.xyzq.cn/" + res.data.data)
            }).catch(() => {
              failure('上传失败，请重新上传')
            })
          }
        }
      }
    },
    created() {
      this.init()
    },

    methods: {
      init: function() {

      },
      handlePublish: function() {
        const article = {
          title: this.article.title,
          headline: this.article.headline,
          content: window.encodeURI(this.article.content)
        }
        publishArticle(article).then(response => {
          /*this.$notify({
            title: '成功',
            message: '发布成功',
            type: 'success',
            duration: 2000
          })*/
          MessageBox.alert("https://static.xyzq.cn/" + response.data.data, '发布成功', {
            confirmButtonText: '确定',
            type: 'success'
          })
          this.$router.push({ path: '/article/list' })
        }).catch(response => {
          MessageBox.alert('业务错误：' + response.data.data.meta.msg, '警告', {
            confirmButtonText: '确定',
            type: 'error'
          })
        })
      },
      handleCancel: function() {

      }
    }
  }
</script>

<style>
</style>
